<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head-fragment(title,path)">
    <meta charset="UTF-8">
    <title>沏沏茶网上茶店 tea-shop</title>
    <link rel="stylesheet" th:href="@{/mall/css/swiper-bundle.min.css}">
    <link rel="stylesheet" th:href="@{/mall/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/mall/css/common.css}">
    <link rel="stylesheet" th:href="@{/mall/styles/header.css}">
    <link rel="stylesheet" th:href="@{'/mall/styles/'+${path}+'.css'}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
    <meta name="keywords" content="tea-shop" />
    <meta name="description" content="我们一直秉承大道至简，分享便可改变世界养生的理念，坚持做最简约灵活的茶

让您拥有多种茶叶，喝时多个选择

茶可以当礼物，当心意

您的每一份帮助都将支持我们做的更好，走的更远！"/>
</head>
<nav id="nav" th:fragment="nav-fragment">
    <div class="banner_x center">
        <a th:href="@{/index}" class="logo"><h1>沏沏茶</h1></a>
        <ul class="list">
<!--            <li><a th:href="@{/seckill}">秒杀专区<img th:src="@{/mall/image/icon-seckill.png}"></a></li>-->
            <li><a th:href="@{/couponList}">领券中心<img th:src="@{/mall/image/icon-coupon.png}"></a></li>
            <li><a th:href="@{/orders}">我的订单<img th:src="@{/mall/image/icon-seckill.png}"></a></li>
        </ul>
        <div class="fr">
            <div class="search">
                <input class="text" type="text" id="keyword" autocomplete="off">
                <div class="search_hot">
                </div>
            </div>
            <div class="button iconfont icon-search" onclick="search()"></div>
        </div>
    </div>
</nav>
<header id="header" th:fragment="header-fragment">
    <div class="center">
        <ul class="fl">
            <li><a th:href="@{/index}">沏沏茶</a></li>
            <li><a th:href="@{/admin/login}">后台管理系统</a></li>
            <li><a href="/customer-service" class="customer-service-link">在线客服</a></li>
            <li class="follow-us">
                <a href="#" class="weixin">关注我们</a>
                <div class="qrcode">
                    <img th:src="@{/mall/image/pay/alipay_qrcode.png}" alt="微信二维码">
                </div>
            </li>
        </ul>
        <div class="fr">
            <th:block th:unless="${session.newBeeMallUser==null}">
                <div class="user">
                    <ul class="selector">
                        <li>
                            <a th:href="@{/personal}">
                                个人中心
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/orders}">
                                我的订单
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/myCoupons}">
                                我的优惠券
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/logout}">
                                退出登录
                            </a>
                        </li>
                    </ul>
                    <a href="##" class="username">
                        <th:block th:text="${session.newBeeMallUser.nickName}"></th:block>
                        <i class="iconfont icon-down"></i>
                    </a>
                </div>
            </th:block>
            <th:block th:unless="${session.newBeeMallUser == null or session.newBeeMallUser.shopCartItemCount == 0}">
                <div class="shopcart">
                    <a th:href="@{/shop-cart}" style="color: white;">
                        <i class="iconfont icon-cart"></i> 购物车(<th:block th:text="${session.newBeeMallUser.shopCartItemCount}"></th:block>)
                    </a>
                </div>
            </th:block>
<!--                写一个当购物车为空的时候的样式，购物车为空时，鼠标移到购物车图标的时候，显示一个下拉菜单信息，并且不能点击购物车，鼠标移出时，不显示任何信息-->


            <th:block th:if="${session.newBeeMallUser==null}">
                <ul class="login">
                    <li><a th:href="@{/login}">登录</a></li>
                    <li><a th:href="@{/register}">注册</a></li>
                </ul>
            </th:block>
            <th:block th:if="${session.newBeeMallUser == null or session.newBeeMallUser.shopCartItemCount == 0}">
                <div class="shopcart empty">
                    <a href="javascript:void(0);" style="color: white;" onclick="return false;">
                        <i class="iconfont icon-cart"></i> 购物车(0)
                    </a>
                    <div class="cart-empty-tip"><i class="iconfont icon-cart"></i> 你的购物车是空的，赶快去逛逛，挑选商品吧。</div>
                </div>
            </th:block>
        </div>
    </div>
</header>
<script th:inline="javascript">
    document.addEventListener("DOMContentLoaded", function () {
        const emptyShopcart = document.querySelector("#header .shopcart.empty a");
        if (emptyShopcart) {
            emptyShopcart.addEventListener("click", function (e) {
                e.preventDefault(); // 阻止跳转
            });
        }
    });
</script>
</html>
